<template>
  <!-- 加载主播电台页面时的主页面 -->
  <div class="dj-main">
    <div class="top">
        <!-- 推荐节目 -->
        <div class="rec-program">
            <div class="title">
                <span>推荐节目</span>
                <span>更多 ></span>
            </div>
            <ul class="content">
                <li v-for="i,index in 10" :key="index">
                    <div class="img">
                        <img src="./img/1.jpg" alt="海报">
                        <i class="icon"></i>
                    </div>
                    <div class="info">
                        <p class="text-ellipsis">400把过去的那些春天带回来吧：#王东电台#经典回顾-3</p>
                        <p>王东电台</p>
                    </div>
                    <div class="other">
                        <h1>音乐推荐</h1>
                    </div>
                </li>
            </ul>
        </div>
        <!-- 节目排行榜 -->
        <div class="program-list">
            <div class="title">
                <span>节目排行榜</span>
                <span>更多 ></span>
            </div>
            <ul class="content">
                <li v-for="i,index in 10" :key="index">
                    <div class="number">
                        <span v-show="index<9" :style="{color:index<3? '#da4545' : '#999'}">0{{index+1}}</span>
                        <span v-show="index==9">{{index+1}}</span>
                    </div>
                    <div class="img">
                        <img src="./img/1.jpg" alt="海报">
                        <i class="icon"></i>
                    </div>
                    <div class="info">
                        <p class="text-ellipsis">400把过去的那些春天带回来吧：#王东电台#经典回顾-3</p>
                        <p>王东电台</p>
                    </div>
                    <div class="other">
                        <span style="width:96%">
                            <i></i>
                        </span>
                    </div>
                </li>
            </ul>
        </div>
        </div>
    <!-- 默认情况下下方公用组件 -->
    <dj-module v-for="i,index in 5" :key="index"></dj-module>
  </div>
</template>

<script>
// 默认情况下下方公用组件
import djModule from '@/components/find-music-components/dj-radio/dj-module'
export default {
  name: "main-page",
  components:{djModule}
};
</script>

<style scoped lang="scss">
    .dj-main{
        width: 100%;
        .top{
            display: flex;
            justify-content: space-between;
            // 推荐节目
            .rec-program{
                width: 426px;
                .title{
                    line-height: 40px;
                    border-bottom: 2px solid #c20c0c;
                    display: flex;
                    justify-content: space-between;
                    span:nth-child(1){
                        color: #333;
                        font-size: 24px;
                    }
                    span:nth-child(2){
                        color: #666;
                        font-size: 12px;
                    }
                }
                .content{
                    border: 1px solid #e2e2e2;
                    border-top: none;
                    li:nth-child(even){
                        background-color: #f7f7f7;
                    }
                    li{
                        width: 100%;
                        height: 40px;
                        padding: 10px 0;
                        display: flex;
                        &:hover{
                            background-color: #eee;
                        }
                        .img{
                            width: 40px;
                            height: 40px;
                            margin: 0 10px 0 15px;
                            position: relative;
                            img{
                                width: 100%;
                                height: 100%;
                                cursor: pointer;
                            }
                            i{
                                display: inline-block;
                                width: 22px;
                                height: 22px;
                                background: url('@/assets/iconall.png') no-repeat;
                                background-position: 0 -85px;
                                position: absolute;
                                top: 50%;
                                left: 50%;
                                transform: translate(-50%,-50%);
                            }
                        }
                        .info{
                            width: 260px;
                            p:nth-child(1){
                                color: #333;
                            }
                            p:nth-child(2){
                                color: #999;
                            }
                            p{
                                font-size: 12px;
                                line-height: 20px;
                                cursor: pointer;
                                &:hover{
                                    text-decoration: underline;
                                }
                            }
                        }
                        .other{
                            width: 60px;
                            margin: 10px 0 0 10px;
                            h1{
                                width: 100%;
                                height: 20px;
                                line-height: 20px;
                                text-align: center;
                                border: 1px solid #999;
                                color: #999;
                                border-radius: 2px;
                                font-size: 12px;
                                cursor: pointer;
                                &:hover{
                                    color: #333;
                                    border: 1px solid #333;
                                }
                            }
                        }
                    }
                    
                }
            }
            // 节目排行榜
            .program-list{
                width: 426px;
                .title{
                    line-height: 40px;
                    border-bottom: 2px solid #c20c0c;
                    display: flex;
                    justify-content: space-between;
                    span:nth-child(1){
                        color: #333;
                        font-size: 24px;
                    }
                    span:nth-child(2){
                        color: #666;
                        font-size: 12px;
                    }
                }
                .content{
                    border: 1px solid #e2e2e2;
                    border-top: none;
                    li:nth-child(even){
                        background-color: #f7f7f7;
                    }
                    li{
                        width: 100%;
                        height: 40px;
                        padding: 10px 0;
                        display: flex;
                        &:hover{
                            background-color: #eee;
                        }
                        .number{
                            width: 45px;
                            line-height: 40px;
                            text-align: center;
                            font-size: 14px;
                        }
                        .img{
                            width: 40px;
                            height: 40px;
                            margin: 0 10px 0 0;
                            position: relative;
                            img{
                                width: 100%;
                                height: 100%;
                                cursor: pointer;
                            }
                            i{
                                display: inline-block;
                                width: 22px;
                                height: 22px;
                                background: url('@/assets/iconall.png') no-repeat;
                                background-position: 0 -85px;
                                position: absolute;
                                top: 50%;
                                left: 50%;
                                transform: translate(-50%,-50%);
                            }
                        }
                        .info{
                            width: 200px;
                            p:nth-child(1){
                                color: #333;
                            }
                            p:nth-child(2){
                                color: #999;
                            }
                            p{
                                font-size: 12px;
                                line-height: 20px;
                                cursor: pointer;
                                &:hover{
                                    text-decoration: underline;
                                }
                            }
                        }
                        .other{
                            width: 100px;
                            height: 8px;
                            margin: 15px 0 0 10px;
                            background: url('@/assets/table.png') no-repeat;
                            background-position: 0 -240px;
                            position: relative;
                            span{
                                position: absolute;
                                height: 100%;
                                padding-right: 4px;
                                box-sizing: border-box;
                                background: url('@/assets/table.png') no-repeat;
                                background-position: right -318px;
                                i{
                                    display: block;
                                    height: 100%;
                                    background: url('@/assets/table.png') no-repeat;
                                    background-position: 0 -304px;
                                }
                            }
                        }
                    }
                    
                }
            }
        }
    }
</style>